<template>
    <div id="newsDetails">
        <tab-nav></tab-nav>
        <div class="ww news-box">
            <div @click="toNews($event)">
                <el-tabs tab-position="left" style="height: 200px;">
                    <el-tab-pane>
                        <span slot="label" data-class="1"><i class="iconfont" @click="">&#xe607;</i>热门专题</span>
                        <ul class="article">


                        </ul>
                    </el-tab-pane>
                    <el-tab-pane lazy>
                        <span slot="label" data-class="2"><i class="iconfont" @click="">&#xe657;</i>行业资讯</span>
                        <ul class="article">

                        </ul>
                    </el-tab-pane>
                    <el-tab-pane lazy>
                        <span slot="label" data-class="3"><i class="iconfont" @click="">&#xe606;</i>创业知识</span>
                        <ul class="article">

                        </ul>
                    </el-tab-pane>
                    <el-tab-pane lazy>
                        <span slot="label" data-class="4"><i class="iconfont" @click="">&#xe669;</i>创业故事</span>
                        <ul class="article">

                        </ul>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <div class="qrcode">
                <h1>扫二维码有惊喜</h1>
                <a href="javascript:void(0);">
                    <img src="./images/qrcode.jpg" alt="">
                </a>
            </div>


            <!--中间部分-->
            <article class="mb-mid banner">
                <div class="article-box">
                    <h1>{{ thisNewsDetail.title }}</h1>
                    <div class="time-from clearfix">
                        <span>{{ thisNewsDetail.createTime | getTime( "YYYY-MM-DD") }}</span>
                        <span>来源：<i>{{ thisNewsDetail.source }}</i></span>
                    </div>
                    <div class="content" v-html="thisNewsDetail.content">

                    </div>
                    <!--分享-->
                    <div class="share clearfix">
                        <div class="share-left">
                            <span>分享到：</span>
                            <a href="javascript:void(0);">
                                <img src="./images/share01.png" alt="">
                            </a>
                            <a href="javascript:void(0);">
                                <img src="./images/share02.png" alt="">
                            </a>
                            <a href="javascript:void(0);">
                                <img src="./images/share03.png" alt="">
                            </a>
                            <a href="javascript:void(0);">
                                <img src="./images/share04.png" alt="">
                            </a>
                        </div>
                        <div class="share-right"><a href="javascript:void(0);">了解{{ thisNewsDetail.source }}</a></div>

                    </div>
                </div>


                <a href="javascript:void(0);" class="customer-service">
                    <img src="./images/customer.png" alt="">
                </a>
            </article>

            <!--右边-->
            <news-right></news-right>
        </div>
    </div>
</template>

<script>

    import Swiper from "swiper"
    import tabNav from "@/components/tabBar/tabBar"
    import newsRight from "@/components/newsRight/newsRight"

    export default {
        name: "News",
        data() {
            return {
                sid: "",
                // 获取的新闻信息
                thisNewsDetail: {}
            }
        },
        methods: {
            lbtInit() {
                new Swiper('.swiper-container', {
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    // pagination: {
                    //     el: '.swiper-pagination',
                    // },
                    //
                    // // 如果需要前进后退按钮
                    // navigation: {
                    //     nextEl: '.swiper-button-next',
                    //     prevEl: '.swiper-button-prev',
                    // },
                    //
                    // // 如果需要滚动条
                    // scrollbar: {
                    //     el: '.swiper-scrollbar',
                    // },
                })
            },
            getNewsDetail() {
                this.sid = this.$route.params.sid
                this.axios.get(this.api.getNewsDetailApi + this.sid)
                    .then(res => {
                        // console.log(res.data)
                        this.thisNewsDetail = res.data
                        // console.log(this.thisNewsDetail)
                        document.title = this.thisNewsDetail.keyword
                        // console.log(document.description)
                        const metaList = document.getElementsByTagName("meta");
                        metaList.keywords.content = this.thisNewsDetail.keyword
                        metaList.description.content=this.thisNewsDetail.description
                    })
                    .catch(err=>{
                        this.$message.error('加载错误，请重试');
                    })


            },
            // 跳转到新闻列表页面，并携带点击的项目
            toNews(e) {
                // console.log(e.target)
                // console.log(e.target.getAttribute("data-class"))
                let thisList;
                thisList = e.target.getAttribute("data-class")
                if (e.target.getAttribute("data-class") === null) {
                    thisList = (parseInt(e.target.getAttribute("id").split("-")[1]) + 1).toString()
                } else {
                    thisList = e.target.getAttribute("data-class")
                }
                // console.log(thisList)
                this.$router.push({
                    name: "news",
                    params : {
                        list: thisList
                    }
                })
            },
        },
        mounted() {
            this.lbtInit()
            this.getNewsDetail()
        },
        created() {

        },
        components: {
            tabNav,
            newsRight
        },
        watch:{
            // 监听路由变化
            $route(to,from){
                // console.log(from) // 跳转时前的页面
                // console.log(to.params.sid);
                this.sid = to.params.id
                this.getNewsDetail()
            }
        },
    }
</script>

<style lang="less">
    @import "../../../node_modules/swiper/dist/css/swiper.min.css";

    #newsDetails {
        background-color: #f8fbfc;

        .news-box {
            margin-top: 20px;
            position: relative;
        }

        /* 二维码 */

        .qrcode {
            width: 157px;
            background-color: #fff;
            padding-top: 42px;
            padding-bottom: 42px;

            h1 {
                color: #477eff;
                font-size: 12px;
                text-align: center;
                margin-bottom: 10px;
            }

            a {
                display: block;
                width: 104px;
                height: 104px;
                margin: 0 auto;

                img {
                    display: block;
                    width: 100%;

                }
            }
        }


        .el-tabs {
            position: relative;
        }

        .el-tabs__header {
            background-color: #fff;
        }

        .el-tabs--left {
            overflow: visible;
        }

        .el-tabs__item {
            width: 157px;
            height: 50px;
            padding: 0;
            text-align: center;
            line-height: 50px;

            &.is-active {
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
            }

            &:hover {
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);

                span {
                    color: #ec664e;
                }
            }


            span {
                font-size: 16px;

            }

            &.is-active {
                color: #ec664e;
            }

        }

        .el-tabs__active-bar {
            background-color: transparent;
        }

        .el-tabs__nav-wrap::after {
            width: 0;
        }

        .el-tabs__content {
            position: absolute;
            top: 263px;
            left: 171px;
            width: 750px;
            overflow: visible;

            ul {
                li {

                }
            }

        }


        /* 新闻内页部分 */

        article {
            position: absolute;
            top: 0;
            left: 171px;
            width: 707px !important;
            background-color: transparent;
            margin-bottom: 24px;

            .article-box {
                //height: 500px;
                background-color: #fff;
                border-top: 1px solid transparent;
                padding-bottom: 47px;
                padding-left: 32px;
                padding-right: 38px;
                margin-bottom: 46px;

                h1 {
                    text-align: center;
                    font-size: 18px;
                    color: #1e2629;
                    margin-top: 23px;
                }

                .time-from {
                    width: 184px;
                    margin: 31px auto 39px auto;

                    span {
                        color: #4f646a;

                        &:nth-of-type(1) {

                        }

                        &:nth-of-type(2) {
                            float: right;
                        }
                    }
                }

                .content {
                    border-bottom: 1px solid #ddd;
                    margin-bottom: 47px;

                    p {
                        text-indent: 2em;
                        font-size: 16px;
                        color: #1e2629;
                        margin-bottom: 32px;
                        line-height: 25px;
                    }

                    img {
                        text-align: center;
                        display: block;
                        margin: 0 auto 0px auto;
                        width: 100%;


                    }
                }

                .share {
                    .share-left {
                        float: left;

                        span {
                            vertical-align: middle;
                            font-size: 16px;
                            color: #4f646a;
                        }

                        a {
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            vertical-align: middle;
                            margin-right: 13px;

                            img {
                                display: inline-block;
                                width: 18px;
                                height: 18px;
                                vertical-align: middle;
                            }
                        }
                    }

                    .share-right {
                        float: right;
                        padding-left: 5px;
                        padding-right: 5px;
                        height: 36px;
                        border-radius: 18px;
                        border: solid 1px #ff0b0f;

                        a {
                            display: block;
                            width: 100%;
                            height: 100%;
                            font-size: 16px;
                            color: #ff0b0f;
                            line-height: 35px;
                            text-align: center;
                        }

                        &:hover {
                            background-color: #ff0b0f;

                            a {
                                color: #fff;
                            }
                        }
                    }
                }

                .customer-service {
                    display: block;
                    width: 707px;
                    height: 78px;

                    img {
                        display: block;
                        width: 100%;
                    }
                }
            }
        }

        .mb-right {
            //flex: 0 0 307px;
            //height: 100px;
            width: 307px;
            position: absolute;
            top: 0;
            right: 0;
            //background-color: #8effa9;

            /* 最新资讯 */

            .mr-news {
                width: 100%;
                border: 1px solid #c2d1d2;
                background: #fff;
                //margin-top: 21px;
                padding: 7px 6px 8px 6px;
                margin-bottom: 20px;

                .mrn-title {
                    height: 68px;

                    background: url("./images/news_title.png") no-repeat center center;
                    background-size: contain;
                }

                ul {
                    padding-left: 18px;
                    padding-right: 18px;
                    margin-top: 18px;

                    li {
                        width: 260px;
                        font-size: 16px;
                        color: #4f646a;
                        overflow: hidden; /*超出部分隐藏*/
                        white-space: nowrap; /*不换行*/
                        text-overflow: ellipsis; /*超出部分文字以...显示*/
                        position: relative;
                        margin-bottom: 10px;

                        &:nth-child(-n+3) {
                            &:before {
                                background-color: #f32222;
                            }
                        }

                        &::before {
                            content: '';
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            left: 0;
                            width: 7px;
                            height: 7px;
                            border-radius: 50%;
                            background-color: #4f646a;
                        }

                        a {
                            padding-left: 15px;

                            &:hover {
                                color: #f32222;
                            }
                        }
                    }
                }
            }

            /* 品牌故事 */

            .story {
                border-width: 4px 1px 1px 1px;
                border-style: solid;
                border-color: #e71f19 #c2d1d2 #c2d1d2 #c2d1d2;
                padding-left: 18px;
                padding-right: 14px;
                padding-bottom: 18px;
                background-color: #fff;
                /* 品牌标题 */

                .story-title {
                    margin-top: 22px;
                    margin-bottom: 15px;
                    padding-bottom: 26px;
                    height: 35px;
                    background: url("./images/story_title_img.png") no-repeat center center;
                    background-size: contain;
                }

                .brand-box {
                    display: flex;
                    justify-content: space-between;
                    flex-flow: row wrap;

                    li {
                        flex: 0 0 132px;
                        margin-bottom: 8px;

                        a {
                            display: block;
                            width: 100%;
                            height: 100%;


                            img {
                                display: block;
                                width: 100%;

                                &:hover {
                                    transform: scale(1.01);
                                }
                            }
                        }
                    }
                }
            }


            /* 最新案例 */

            .case {
                padding-top: 23px;
                padding-left: 17px;
                padding-right: 13px;
                width: 306px;
                padding-bottom: 20px;
                //background-color: pink;
                margin-top: 30px;
                margin-bottom: 23px;
                border-width: 4px 1px 1px 1px;
                border-style: solid;
                border-color: #e71f19 #c2d1d2 #c2d1d2 #c2d1d2;
                background-color: #fff;
                /* 标题 */

                .selqa-title {
                    height: 37px;
                    background: url("./images/new-case-title-img.png") no-repeat center center;
                    background-size: contain;
                    margin-bottom: 12px;
                }

                .sel-nav {
                    border-top: 1px solid #eaeaea;
                    padding-top: 25px;
                    padding-left: 8px;
                    padding-right: 4px;

                    li {
                        position: relative;
                        padding-left: 20px;


                        margin-bottom: 10px;

                        a {
                            display: block;
                            width: 100%;
                            height: 100%;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            font-size: 16px;
                            color: #4f646a;
                        }

                        &::before {
                            content: "";
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transform: translateY(-50%);
                            width: 7px;
                            height: 7px;
                            border-radius: 50%;
                            background-color: #4f646a;
                        }

                        &:nth-of-type(-n+3) {
                            &::before {
                                background-color: #e71f19;
                            }
                        }

                        &:hover {
                            a {
                                color: #e71f19;

                            }

                            &::before {
                                background-color: #e71f19;
                            }
                        }
                    }
                }
            }

            /* 人物专访 */

            .interview {
                padding-top: 23px;
                padding-left: 17px;
                padding-right: 13px;
                width: 306px;
                padding-bottom: 20px;
                //background-color: pink;
                margin-top: 30px;
                margin-bottom: 23px;
                border-width: 4px 1px 1px 1px;
                border-style: solid;
                border-color: #e71f19 #c2d1d2 #c2d1d2 #c2d1d2;
                background-color: #fff;
                /* 标题 */

                .interview-title {
                    height: 37px;
                    background: url("./images/interview_title_img.png") no-repeat center center;
                    background-size: contain;
                    margin-bottom: 30px;
                }

                img {
                    width: 270px;
                    height: 168px;
                    background-color: #000000;
                    border-radius: 5px;
                    display: block;
                }

                .interview-nav {
                    margin-top: 31px;

                    li {
                        position: relative;
                        padding-left: 20px;


                        margin-bottom: 10px;

                        a {
                            display: block;
                            width: 100%;
                            height: 100%;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            font-size: 16px;
                            color: #4f646a;
                        }

                        &::before {
                            content: "";
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transform: translateY(-50%);
                            width: 7px;
                            height: 7px;
                            border-radius: 50%;
                            background-color: #4f646a;
                        }

                        &:nth-of-type(-n+3) {
                            &::before {
                                background-color: #e71f19;
                            }
                        }

                        &:hover {
                            a {
                                color: #e71f19;

                            }

                            &::before {
                                background-color: #e71f19;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
